<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>部门信息数据展示</title>
    <link href="http://localhost:8080/static/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 6px 16px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <form class="layui-form" action="javascript:;">
        部门名称：
        <div class="layui-inline">
            <input class="layui-input" name="deptName" id="deptName" autocomplete="off" style="width: 100px;">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态: </label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="status" id="status">
                    <option value="">请选择</option>
                    <option value="0">正常</option>
                    <option value="1">停用</option>
                </select>
            </div>
        </div>
        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    </form>
</div>

<br/><br/>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</button>
    </div>
</script>

<table class="layui-hide" id="menu" lay-filter="menu"></table>
<!-- 表格操作列 -->
<script type="text/html" id="menusState">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>

<script src="http://localhost:8080/static/layui/layui.js"></script>
<script src="http://localhost:8080/static/layui/treetable-lay/treeTable.js"></script>
<script src="http://localhost:8080/static/layui/js/jquery-3.6.3.js"></script>

<script>

    layui.use(['treeTable', 'table', 'layer'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let treetable = layui.treeTable;
        //渲染表格
        let renderTable = function () {
            layer.load(2);  //加载层
            treetable.render({
                elem: '#menu',
                url: 'http://localhost:8080/sysDept/selectAllDept.do',
                // toolbar: 'default',
                height: '500',
                method: 'get',
                where: {
                    name: $("#name").val()
                },
                where: {
                    deptName: $("#deptName").val(),
                    status: $("#status").val(),
                },
                tree: {
                    iconIndex: 2,
                    isPidData: true,
                    idName: 'deptId',//父ID
                    pidName: 'parentId',//子ID
                    openName: 'open',// 是否默认展开的字段名
                    treeDefaultClose: false,//是否默认折叠
                    treeLinkage: false,		//父级展开时是否自动展开所有子级
                    //public bool open { get; set; }open字段是bool类型
                },
                toolbar: '#toolbarDemo',
                page: false,
                cols: [[
                    {field: 'deptId', title: '部门ID', width: 100, sort: true, fixed: 'left'},
                    {field: 'parentId', title: '上级部门', width: 200},
                    {field: 'deptName', title: '部门名称', width: 220},
                    {field: 'orderNum', title: '排序', width: 100},
                    {field: 'status', title: '状态', width: 100},

                    {field: 'createTime', title: '创建时间', align: 'center', width: 220},
                    {toolbar: '#menusState', width: 260, align: 'center', title: '操作'}
                ]],
                style: 'margin-top:0;',
                //数据渲染完的回调
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                },
            })
        };
        renderTable();

        //头工具栏添加
        treetable.on('toolbar(menu)', function (obj) {
            if (obj.event === 'add') {
                layer.open({
                    type: 2,//页面
                    title: "添加",
                    area: ["60%", "80%"],
                    content: 'http://localhost:8080/static/dept/layui_dept_add.html'
                })
            } else if (obj.event === "refresh") {
                renderTable();
            }
        })

        // 单元格工具事件
        treetable.on('tool(menu)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                //layer.msg('查看操作');
                //layer.msg(data.toString());//string字符内容
                layer.msg(JSON.stringify(data));//json格式
            } else if (layEvent === 'edit') {
                layer.open({
                    type: 2,//页面
                    title: "编辑",
                    area: ["60%", "80%"],
                    content: 'http://localhost:8080/static/dept/layui_dept_update.html?deptId=' + data.deptId
                })
            } else if (layEvent === 'add') {
                layer.open({
                    type: 2,//页面
                    title: "新增",
                    area: ["60%", "80%"],
                    content: 'http://localhost:8080/static/dept/layui_dept_add.html?deptId=' + data.deptId
                })
            }else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "http://localhost:8080/sysDept/deleteDept.do",
                        data: data,
                        type: "post",
                        success: function (res) {
                            //console.log(res);
                            if (res == 1) {
                                //添加成功，关闭当前弹窗层
                                layer.msg("删除成功");
                                window.location.href = "http://localhost:8080/sysDept/dept.do";

                            } else {
                                layer.msg("删除失败");
                            }
                            window.location.href = "http://localhost:8080/sysDept/dept.do";
                        },
                        error: function () {
                            console.log("err....");
                        }
                    });
                });
            }

        });

        //搜索
        $("#search").on('click', function () {
            let searchDeptName = $("#deptName").val();
            let searchStatus = $("#status").val();
            treetable.reload('menu', {
                page: {
                    curr: 1//重新从第一页开始
                },
                where: {
                    deptName: searchDeptName,
                    status: searchStatus,
                },
            });
            //重加载后，重新赋值上次搜索的内容
            $('deptName').val(searchDeptName);
            $('status').val(searchStatus);
        });

    });

    // 渲染表格
    // let treemenu = {
    //     reload: function () {
    //         treetable.render({
    //             elem: '#demo',
    //             url:'http://localhost:8080/sysDept/selectAllDept.do',
    //             // toolbar: 'default',
    //             height: '500',
    //             method:'get',
    //             where: {
    //                 name: $("#name").val()
    //             },
    //             tree: {
    //                 iconIndex: 2,
    //                 isPidData: true,
    //                 toolbar: '#toolbarDemo',//开启工具栏
    //                 idName: 'deptId',//父ID
    //                 pidName: 'parentId',//子ID
    //                 openName: 'open',// 是否默认展开的字段名
    //                 treeDefaultClose: false,	//是否默认折叠
    //                 treeLinkage: false,		//父级展开时是否自动展开所有子级
    //                 //public bool open { get; set; }open字段是bool类型
    //             },
    //              defaultToolbar: ['filter', 'print', 'exports'],
    //             cols: [[
    //                 {type:'radio'},
    //                 {field: 'deptId', title: '部门ID', width: 100},
    //                 {field: 'parentId', title: '', width: 200},
    //                 {field: 'deptName', title: '部门名称', width: 220},
    //                 {field: 'orderNum', title: '排序', width: 100},
    //                 {field: 'status', title: '状态', width: 100},
    //
    //                 {field: 'createTime', title: '创建时间', align: 'center', width: 220},
    //                 {toolbar: '#menusState', width: 260, align: 'center', title: '操作'}
    //             ]],
    //             style: 'margin-top:0;',
    //
    //         });
    //         treetable.on('tool(menus-table)', function (obj) {
    //             let data = obj.data;
    //             let layEvent = obj.event;
    //             if (layEvent === 'detail') {
    //                 layer.msg(data);
    //                 layer.open({
    //                     type: 2, //type2表示打开iframe层
    //                     title: ['详情'],  //false表示不显示标题
    //                     area: ['800px', '600px'],
    //                     shade: 0.1, //是否显示遮罩层
    //                     // shadeClose: true, //是否点击遮罩关闭
    //                     id: "detail",  //设置id防止重复弹出
    //                     moveType: 0, //拖拽模式0或者1
    //                     content:"page/configure/menu_detail.html?" + $.param({
    //                         code: data.code,
    //                         icon: data.icon,
    //                     })
    //                 });
    //             } else if (layEvent === 'edit') {
    //                 layer.msg(data);
    //                 layer.open({
    //                     type: 2, //type2表示打开iframe层
    //                     title: ['新增配置'],  //false表示不显示标题
    //                     area: ['800px', '700px'],
    //                     shade: 0.1, //是否显示遮罩层
    //                     // shadeClose: true, //是否点击遮罩关闭
    //                     id: "edit1",  //设置id防止重复弹出
    //                     moveType: 0, //拖拽模式0或者1
    //                     content:"page/configure/menu_edit.html?" + $.param({
    //                         code: data.code,
    //                         icon: data.icon,
    //                     })
    //                 });
    //             }else if (layEvent === 'add') {
    //                 layer.msg(data);
    //                 layer.open({
    //                     type: 2, //type2表示打开iframe层
    //                     title: ['新增'],  //false表示不显示标题
    //                     area: ['800px', '700px'],
    //                     shade: 0.1, //是否显示遮罩层
    //                     // shadeClose: true, //是否点击遮罩关闭
    //                     id: "edit1",  //设置id防止重复弹出
    //                     moveType: 0, //拖拽模式0或者1
    //                     content:"http://localhost:8080/static/dept/layui_dept_add.html?"+ $.param({
    //                         deptId:data.deptId,
    //                     })
    //                 });
    //             }
    //
    //         });
    //         form.render();
    //     }
    //
    // }


</script>
</body>
</html>
